<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="brand-info">
          <h2 class="brand-info__text">IDS训练平台</h2>
          <p class="brand-info__intro">这个IDS训练平台是基于PSO算法构建开发最新IDS训练平台</p>
        </div>
        <div class="login-main">
          <h3 class="login-title">IDS训练平台</h3>
          <el-form :model="loginForm" :rules="loginFormRoles" ref="loginFormRef" @keyup.enter.native="login"
                   status-icon>
            <el-form-item prop="email">
              <el-input v-model="loginForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="platform">
              <el-select
                  v-model="loginForm.platform"
                  placeholder="请选择你的平台">
                <el-option label="AdminEnd" value="admin"></el-option>
                <el-option label="UserEnd" value="user"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="code">
              <div style="width: 100%;height: 100%;display: flex;align-items: center">
                <el-input v-model="loginForm.code" placeholder="点击图片更换验证码"
                          style="width: 250px;"></el-input>
                <img :src="vcUrl" @click="updateVerifyCode">
              </div>
            </el-form-item>
            <el-form-item>
              <el-row :gutter="10">
                <el-col :span='5'>
                  <el-checkbox v-model="loginForm.rememberMe"><span style="color: #fff">记住我</span>
                  </el-checkbox>
                </el-col>
              </el-row>
              <div style="color: red;float: right;" v-if="register">
                <router-link class="link-type" :to="'/register'">立即注册</router-link>
              </div>
              <el-col :span='100'>
                <p style="color: red">没有注册点击旁边立即注册进行注册</p>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      vcUrl: '/verifyCode?time=' + new Date(),
      //这是登录表单的数据绑定对象
      loginForm: {
        email: '',
        password: '',
        code: '',
        rememberMe: false
      },
      register: true,
      emRegisterForm: {
        email: '',
        username:'',
        code: ''
      },
      //这是表单的验证规则对象
      loginFormRoles: {
        //验证用户名是否合法
        email: [
          { required: true, trigger: "blur", message: "请输入您的邮箱" },
          { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
          { pattern:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
            message:'请输入正确的邮箱格式', trigger: "blur" }
        ],
        //验证密码是否合法
        password: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 3, max: 15, message: "长度在3到15个字符", trigger: 'blur'}
        ],
      },
      emRegisterRules:{
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
        email: [
      { required: true, trigger: "blur", message: "请输入您的邮箱" },
      { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
      { pattern:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
        message:'请输入正确的邮箱格式', trigger: "blur" }
       ],
      },
      emRegisterDialog: false,
    }
  },

  methods: {
    updateVerifyCode() {
      this.vcUrl = '/verifyCode?time=' + new Date();
    },
    //点击重置登录表单
    resetLoginForm() {
      // console.log(this)
      this.$refs.loginFormRef.resetFields();
    },
    //
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        const res = await this.postKeyValueRequest('/doLogin', this.loginForm);
        // console.log(res);
        //将登陆成功之后的数据保存在sessionStorage中
        if (res) {
          window.sessionStorage.setItem("user", JSON.stringify(res.obj));
          this.$store.commit('changeState', res.obj);
          this.$websocket.dispatch('websocket_init',"ws://localhost:10001/ws/asset/"+this.$store.state.user.name)
        } else {
          setTimeout(() => {
            loading.close();
          }, 2000);
          this.updateVerifyCode();
          return;
        }
        await this.$router.push('/home');
        setTimeout(() => {
          loading.close();
        });
      });
    },
    emRegisterDialogClosed() {
      this.$refs.emRegisterRef.resetFields()
    },
    openemRegister() {
      this.emRegisterDialog = true;
    },
    async getSmsCode(){
      const res=await this.$http.get('/smsCode',{
        params:{
          mobile: this.emRegisterForm.mobile
        }
      })
    },
    async emRegister(){
      this.$refs.emRegisterRef.validate(async valid => {
        console.log(this.emRegisterForm);
        const res=await  this.postKeyValueRequest('/emRegister',this.emRegisterForm);
        console.log(res)
        if (res) {
          window.sessionStorage.setItem("user", JSON.stringify(res.obj));
          this.$store.commit('changeState', res.obj)
          this.emRegisterDialog=false
        } else {
          return;
        }
        await this.$router.push('/home');
      })
    }
  }

};
</script>
<!--scoped如果加上只在本页面生效，去掉就全局生效,只要是但文件就定义-->
<style lang="less" scoped>
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, .6);
  overflow: hidden;

  &:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/log2.jpg);
    background-size: cover;
  }

  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }

  .site-content {
    min-height: 100%;
    padding: 30px 500px 30px 30px;
  }

  .brand-info {
    margin: 220px 100px 0 90px;
    color: #fff;
  }

  .brand-info__text {
    margin: 0 0 22px 0;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
  }

  .brand-info__intro {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.58;
    opacity: .6;
  }

  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 350px;
    min-height: 100%;
    background-color: Transparent;
  }

  .login-title {
    font-size: 25px;
    color: #fff;
  }

  .login-captcha {
    overflow: hidden;

    > img {
      width: 100%;
      cursor: pointer;
    }
  }

  .login-btn-submit {
    width: 100%;
    margin-top: 38px;
  }

}

</style>
